<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位</title>
  <style>

  </style>
</head>

<body>
  <!-- 写一个复杂的横向tab按钮样式 -->
  <div>
    <span class="tab1">首页</span>
    <span class="tab2">商品</span>
    <span class="tab3">我的</span>
    <span class="tab4">购物车</span>
  </div>
  <span class="content">0</span>





  <script>
    let tabIndex = 0
    let content = document.querySelector('.content')
    let tabs = document.querySelectorAll('span')
    let newp = document.createElement('p')
    tabs.forEach((item, index) => {
      item.addEventListener('click', function () {
        tabIndex = index
        content.innerText = tabIndex
        this.style.backgroundColor = 'red'
        tabs.forEach((item, index) => {
          if (index !== tabIndex) {
            item.style.backgroundColor = 'white'
          }
        })
      })
    })
    content.addEventListener('click', function () {

      newp.innerText = '我是新创建的元素'
      this.prepend(newp)
    })




  </script>
</body>

</html>